<template>
  <div class="scroll-content">
    <div v-show="scrollH" class="scroll-bar" ref='scrollBar' :style="{height: barHeightStr}"></div>
    <div class="act-content" ref="scrollE">
      <div class="inner-content" ref="scrollCon">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        barHeight: 0,
        isCanMove: false,
        current: null,
        scrollH: 0,
        scrollRegionY: 0,
        scrollEY: 0,
        scrollBar: null,
        scrollE: null,
        scrollCon: null
      };
    },
    props: {
      scrollConHeight: {
        type: Number,
        default: 200
      }
    },
    computed: {
      barHeightStr: function () {
        return this.barHeight + 'px';
      }
    },
    methods: {
      getAbsolutePos (node) {
        var left = node.offsetLeft; // 获取元素相对于其父元素的left值var left
        var top = node.offsetTop;
        this.current = node.offsetParent; // 取得元素的offsetParent
        // 一直循环直到根元素
        while (this.current != null) {
          left += this.current.offsetLeft;
          top += this.current.offsetTop;
          this.current = this.current.offsetParent;
        }
        return {
          'left': left,
          'top': top
        };
      }
    },
    mounted: function () {
      let self = this;
      self.scrollBar = self.$refs.scrollBar;
      self.scrollE = self.$refs.scrollE;
      self.scrollCon = self.$refs.scrollCon;
      this.$nextTick(function () {
        console.log(getComputedStyle(self.scrollCon).height);
        let offsetY = 0;
        let isCanMove = false;
        self.scrollE.addEventListener('mousewheel', function (e) {
          let num = 0;
          while (num < 10) {
            let scrollY = 0;
            if (e.wheelDelta > 0) {
              scrollY = -1;
            }
            if (e.wheelDelta < 0) {
              scrollY = 1;
            }
            scrollY = self.scrollBar.offsetTop + scrollY;
            if (scrollY >= self.scrollRegionY) {
              scrollY = self.scrollRegionY;
            } else if (scrollY <= 0) {
              scrollY = 0;
            }
            self.scrollBar.style.top = scrollY + 'px';
            self.scrollCon.style.top = -(self.scrollBar.offsetTop * self.scrollH / ((self.scrollRegionY))) + 'px';
            num++;
          }
        });
        self.scrollBar.addEventListener('mousedown', function (e) {
          e.stopPropagation();
          e.preventDefault();
          isCanMove = true;
          offsetY = e.offsetY;
          return false;
        });
        window.addEventListener('mousemove', function (e) {
          if (isCanMove) {
            let scrollBarTop = e.pageY - self.scrollEY - offsetY;
            if (scrollBarTop >= self.scrollRegionY) {
              scrollBarTop = self.scrollRegionY;
            }
            if (scrollBarTop < 0) {
              scrollBarTop = 0;
            }
            self.scrollBar.style.top = scrollBarTop + 'px';
            self.scrollCon.style.top = -(self.scrollBar.offsetTop * self.scrollH / ((self.scrollRegionY))) + 'px';
          }
        });
        window.addEventListener('mouseup', function () {
          isCanMove = false;
        });
      });
    },
    watch: {
      scrollConHeight: function (val, oldVal) {
        console.log('scrollConHeight');
        let scrollBar = this.scrollBar;
        let scrollE = this.scrollE;
        let scrollCon = this.scrollCon;
        scrollBar.style.top = '0px';
        scrollCon.style.top = '0px';
        this.scrollH = (val - scrollE.offsetHeight) > 0 ? val - scrollE.offsetHeight : 0;
        this.barHeight = parseInt((scrollE.offsetHeight * scrollE.offsetHeight) / val);
        this.scrollRegionY = scrollE.offsetHeight - this.barHeight;
        this.scrollEY = this.getAbsolutePos(scrollE).top;
      }
    }
  };
</script>
<style scoped>
  .scroll-content{
    position: relative;
    height: 300px;
    overflow: hidden;
    background-color: lightgray;
  }
  .scroll-content>
  .scroll-bar{
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 50px;
    z-index: 10;
    border-radius: 10px;
    background-color: blue;
  }
  .scroll-content>
  .scroll-bar:active{
    background-color: red;
    cursor: pointer;
  }
  .scroll-content>
  .act-content{
    position: relative;
    box-sizing: border-box;
    height: 300px;
    overflow: hidden;
    background-color: rgba(206, 219, 222, 1);
  }
  .scroll-content>
  .act-content>
  .inner-content{
    position: relative;
    background-color: lightblue;
    /*height: 500px;*/
  }
</style>

